<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新闻介绍</title>
    <!--    多个css同时引用，
    如果css样式一样，后面一个会覆盖前面一个
    如果不一样，则取两个之和的并集-->
    <link rel="stylesheet" href="../css/common.css">
    <!--    <link rel="stylesheet" href="../css/index.css">-->
    <script src="../js/jquery-3.6.3.min.js"></script>
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/news.css">

</head>
<body class="justify-content-center">
<!--页面上所有的内容全部放在中间的div里面-->
<!--如果想知道div的边界，建议用border边框-->
<!--默认div是有宽度无高度-->
<!--div可以认为容器，元素，对象，标签-->
<div>
    <!--    页面区分有多少div，规则：先上下结构再左右结构-->
    <!--    div最好不要想到可以相交-->
    <!--    头部内容-->
    <div id="top"></div>
    <!--    中间内容-->
    <div class="justify-content-center middle">
        <div>
            <div class="justify-content-between">
                <div class="title-bar">新闻介绍</div>
                <div class="justify-content-start style">
                    <div>行业动态</div>
                    <div>餐饮知识</div>
                    <div>公司新闻</div>
                </div>
            </div>
            <div class="border-top">
                <!--                新闻内容-->
                <div class="news">
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                    <div class="justify-content-between">
                        <div class="justify-content-start align-items-center">
                            <div><img src="../img/21.png"/></div>
                            <div class="font-title single-over">
                                日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海日本较大抹茶餐饮七叶和茶登陆上海
                            </div>
                        </div>
                        <div>2023-2-2</div>
                    </div>
                </div>
                <!--                分页-->
                <div id="page"></div>
            </div>
        </div>
    </div>
    <!--    底部内容-->
    <div id="foot"></div>
</div>
</body>
</html>
